import React from "react";
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {ListView ,Icon,Grid,WhiteSpace} from "antd-mobile";
import styles from './zdsc.less'

const data = [
  {
    icon: <Icon size="md" type={require('../../../svgs/work/doc.svg')} />,

    des: '中共中央印发《中国共...法则》.docx',
  },
  {
    icon: <Icon size="md" type={require('../../../svgs/work/ppt.svg')} />,

    des: '干部教育培训工作条例.pptx',
  },
  {
    icon: <Icon size="md" type={require('../../../svgs/work/xls.svg')} />,

    des: '《中国共产党统一战线》',
  },
];
const NUM_ROWS = 20;
let pageIndex = 0;

function genData(pIndex = 0) {
  const dataBlob = {};
  for (let i = 0; i < NUM_ROWS; i++) {
    const ii = (pIndex * NUM_ROWS) + i;
    dataBlob[`${ii}`] = `row - ${ii}`;
  }
  return dataBlob;
}

class zdsc extends React.Component {
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    this.state = {
      dataSource,
      isLoading: true,
    };
  }

  componentDidMount() {
    // you can scroll to the specified position
    // setTimeout(() => this.lv.scrollTo(0, 120), 800);

    // simulate initial Ajax
    setTimeout(() => {
      this.rData = genData();
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 600);
  }

  onEndReached = (event) => {
    // load new data
    // hasMore: from backend data, indicates whether it is the last page, here is false
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    console.log('reach end', event);
    this.setState({isLoading: true});
    setTimeout(() => {
      this.rData = {...this.rData, ...genData(++pageIndex)};
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      });
    }, 1000);
  }


  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    let index = data.length - 1;
    const row = (rowData, sectionID, rowID) => {
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];
      return (
        <div key={rowID} style={{padding: '0 15px'}}>
          <div style={{display: '-webkit-box', display: 'flex', padding: '15px 0'}}>

           <div style={{width:'1rem',height:'1rem'}}>{obj.icon}</div>&nbsp;&nbsp;&nbsp;&nbsp;
            <div style={{lineHeight: 1}}>
              <div style={{marginBottom: '8px', fontWeight: 'bold'}}>{obj.des}</div>

              <div style={{marginTop:'0.3rem'}}><span style={{fontSize: '30px', color: '#B5B5B5',fontSize:'0.33rem'}}>{rowID}KB</span></div>
            </div>
          </div>
        </div>
      );
    }
    return (
      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
        </div>)}
        renderRow={row}
        renderSeparator={separator}
        className="am-list"
        pageSize={4}
        useBodyScroll
        onScroll={() => {
          console.log('scroll');
        }}
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
    );
  }
}

function mapStateToProps({ work }){
  return {
    work
  };
}
export default connect(mapStateToProps)(zdsc);
